@extends('layouts.backend')

@section('css_before')
    @include('vendor.font-awesome.assets')
@endsection
@section('js_before')
    @include('vendor.table.assets')
@endsection

@section('content')
    <!-- Hero -->
    <div class="bg-body-light">
        <div class="content content-full">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                <h1 class="flex-sm-fill h3 my-2">
                    后台用户管理
                </h1>
                <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt">
                        <li class="breadcrumb-item">
                            <a class="link-fx" href="/">首页</a>
                        </li>
                        <li class="breadcrumb-item" aria-current="page">
                            用户列表
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <!-- END Hero -->
    <!-- Page Content -->
    <div class="content">
        <div class="block">
            <div class="block-header">
               @include('perm.user.toolbar')
            </div>
            <div class="block-content block-content-full">
                @include('widgets.flash')
                <table id="table" data-toggle="table"
                       data-url="/perm/user/table"
                       data-pagination="true"
                       data-search="true"
                       data-show-refresh="true"
                       data-show-toggle="true"
                       data-show-columns="true"
                       data-page-list="[10, 25, 50, 100, ALL]"
                       data-toolbar="#toolbar">
                    <thead>
                    <tr>
                        <th data-field="id" data-align="center" data-width="50">ID</th>
                        <th data-field="name">姓名</th>
                        <th data-field="username">用户名</th>
                        <th data-field="role_name">角色</th>
                        <th data-field="last_login_at" data-align="center" data-width="170" data-sortable="true">最后登录时间</th>
                        <th data-field="last_actived_at" data-align="center" data-width="170" data-sortable="true">最后活跃时间</th>
                        <th data-field="state_name" data-align="center"  data-width="80" data-sortable="true" data-formatter="stateFormatter">状态</th>
                        <th data-field="action" data-align="center" data-width="150" data-formatter="actionFormatter"
                            data-events="actionEvents">操作
                        </th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <!-- END Page Content -->
    <script>
        function actionFormatter(value, row, index) {
            var stateClass = 'dark',stateStr = '禁用';
            switch (row.state) {
                case 0:
                    stateStr = '启用';
                    stateClass = 'success';
                    break;
            }

            return [
                '<div class="btn-group btn-group-xs">',
                '<button class="btn btn-primary edit" data-toggle="tooltip" data-placement="top" title="编辑"><i class="fa fa-fw fa-pencil-alt"></i></button>',
                '<button class="btn btn-danger remove" title="删除"><i class="fa fa-fw fa-times"></i></button>',
                '<button class="btn btn-'+stateClass+' cancel" title="'+stateStr+'">'+stateStr+'</button>',
                '</div>',
            ].join('');
        }

        window.actionEvents = {
            'click .edit': function (e, value, row, index) {
                window.location.href = '/perm/user/' + row.id + '/edit';

            },
            'click .remove': function (e, value, row, index) {
                // $('#modal_remove').data('id', row.id);
                if(confirm("确定要执行删除操作吗？")) {
                    $.ajax({
                        type: 'post',
                        data: {'_token': '{{ csrf_token() }}', '_method':'DELETE'},
                        url: '/perm/user/' + row.id,
                        success: function (res) {
                            if(res.code === 200) {
                                $('#table').bootstrapTable('refresh');
                                return msg(res.message, 'success');
                            } else {
                                return msg(res.message, 'error');
                            }
                        }
                    });
                }
            },
            'click .cancel': function (e, value, row, index) {
                //启用、禁用
                $.ajax({
                    type: 'post',
                    data: {'_token': '{{ csrf_token() }}', 'state':row.state},
                    url: '/perm/user/' + row.id +'/state',
                    success: function (res) {
                        if(res.code === 200) {
                            $('#table').bootstrapTable('refresh');
                            return msg(res.message, 'success');
                        } else {
                            return msg(res.message, 'error');
                        }
                    }
                });
            },
        };

        function stateFormatter(value, row, index) {
            var style = 'primary';
            switch (row.state) {
                case 1:
                    style = 'success';
                    break;
                case 0:
                    style = 'danger';
                    break;
            }
            return [
                '<span class="badge badge-' + style + '">' + row.state_name + '</span>',
            ].join('');
        }
    </script>
@endsection
